@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-counter';

$sizes: 's', 'm';
$appearances: 'primary', 'neutral', 'red';
$variants: 'count', 'count-plus', 'count-k';
$colors: 'accent', 'decor';

$value-typography: (
  s: $sans-label-s,
  m: $sans-label-l
);
$plus-typography: (
  s: $sans-label-l,
  m: $sans-label-l
);
$key-typography: (
  s: $sans-label-s,
  m: $sans-label-l
);
$text-color: (
  accent: 'on-accent',
  decor: 'text-main'
);
$bg-color: (
  accent: 'accent-default',
  decor: 'decor-default'
);

.counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
  width: max-content;

  border: 0 solid transparent;

  @each $color in $colors {
    @each $appearance in $appearances {
      &[data-color='#{$color}'] {
        &[data-appearance='#{$appearance}'] {
          $text: simple-var($text-color, $color);
          $background: simple-var($bg-color, $color);

          color: simple-var($theme-variables, 'sys', $appearance, $text);
          background-color: simple-var($theme-variables, 'sys', $appearance, $background);
          border-color: $sys-neutral-background1-level;
        }
      }
    }
  }

  @each $size in $sizes {
    &[data-size='#{$size}'] {
      @include composite-var($value-typography, $size);
      @include composite-var($counter, $size);

      .plus {
        @include composite-var($plus-typography, $size);
      }

      .key {
        @include composite-var($key-typography, $size);
      }
    }
  }
}
